Advanced React Context Typescript | useContext and createContext

Time to talk about context again! This time it's more advanced and I'll talk about using ReactJS Context with Typescript. I'll also show how to create a custom hook and a component to use the context. Finally I'll show how to memoize the context.
Files: github.com/wei...
00:42 - Part 1 - Create a context
11:21 - Part 2 - Customize stuff
21:49 - Part 3 - Memoizing
Support me by subscribing to this channel ❤️
Do you want to master #react, #gatsby, or #svelte fast? ⏩ 🚀 👩‍🚀
Check out my premium courses at www.weibenfalk...
-
Find me somewhere below:
Linkedin: / thomas-weibenfalk-7635...
Twitter: / weibenfalk
Github: github.com/wei...
FreeCodeCamp: www.freecodeca...
Dev.to: dev.to/weibenfalk

[@deathdefier45]

Clean to the point explanation, thank you for helping me visualise the data changes so clearly, great tutorial!

[@fatinfuyad2816]

Very important video. I was looking for context with tsx

[@dananjayachathuranga7113]

finally found a clear video

[@elsplatto]

And with 30 minutes of my time I now have a context wrapped around my tricky filter UI and wiped out half the JS in that component. Many thanks.

[@Weibenfalk]

wonderful!

[@biLLie_wiLLie]

19:05 with cmd + D it's faster to achieve) Thank you for lesson

[@PattyBeautCode]

Amazing example ! Thanks very much ! I have implement this to my context and it work nicely!

[@starlodroid2778]

Man you helped me very much!Thanks

[@polioann]

u answered all my questions!

[@ziedmoharram7020]

thanks for the video, very usefull !

[@kemcadams7210]

how do you mock this hook for jest testing?

[@aidarousjibril6323]

Hej Thomas, lärorik video, har du någon video som du går genom lite djupt på hur man skickar State mellan olika component på en nested state data i ReactJS och TypeScript?

[@Weibenfalk]

Hej ... hmmm .. vet inte riktigt hur du menar. State skickar man aldrig utan man skickar data via props till komponenterna. Annars är det context man kör med och då kan man accessa statet vartsomhelst i appen.

[@aidarousjibril6323]

@@Weibenfalk Jo jag vet, det jag vill göra är, jag har tre comp, Home.tsx där jag fetchar en lokal nested json fil sedan definierar interfaces för dessa nested data, efter jag gör map på datan och skickat en del över till GameList.tsx, samtidigt skickar jag en del av state över till Search.tsx som filtrering på game titel sker, sedan vill jag sätta den filtrerade data på State och skickar tillbaka till Home.tsx som är Parent comp, men jag får en Typescript error mer specifikt STATE

[@avneet12284]

Great video but a lot of this is confusing to me.
In the first case where there's no useEffect I couldn't understand why the useMemo in the context did the trick. After all, if the button is pressed then a new object should be generated despite the useMemo because the state has changed and the useMemo dependency array has this element.
Yet, the Laser component didn't re-render. Any idea about the reason?

[@Weibenfalk]

It’s the first context that changes value. Not the second one. That’s why it’s the same object when it’s memoized

[@avneet12284]

@@Weibenfalk oh man, how did I miss that!